<template>
  <div class="wrapper example7-container">
    <!-- 返回区域 -->
    <div
      class="back-box"
      @click="$router.go(-1)"
    >返回</div>

    <!-- 标题区域 -->
    <h1 class="title-box">7、watch监视ref函数定义的数据</h1>

    <!-- 实例区域 -->
    <div class="example7-box">
      <h1>当前求和为：{{ sum }}</h1>
      <button @click="sum++">点我+1</button>
      <hr>
      <h1>当前信息为：{{ msg }}</h1>
      <button @click="msg+='！'">修改信息</button>
    </div>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  name: 'Example7',
  setup() {
    // 数据
    const sum = ref(0);
    const msg = ref('你好啊');

    // 情况一：监视ref定义的一个响应式数据
    // watch(sum, (newValue, oldValue) => {
    //   console.log('sum变化了--', newValue, oldValue);
    // });

    // 情况二：监视ref定义的多个响应式数据
    watch([sum, msg], (newValue, oldValue) => {
      console.log('sum或msg变化了--', newValue, oldValue);
    });

    return {
      sum,
      msg
    };
  }
};
</script>

<style lang="scss" scoped>
.example7-container {
  // 返回区域
  & > .back-box {
    width: 50px;
    height: 23px;
    line-height: 20px;
    text-align: center;
    background-color: #efefef;
    margin-bottom: 20px;
    font-size: 14px;
    border: 1px solid #767676;
    border-radius: 4px;
    cursor: pointer;
  }

  // 标题区域
  & > .title-box {
    margin-bottom: 30px;
  }

  // 实例区域
  & > .example7-box {
    & > h1 {
      margin-bottom: 20px;
    }
    & > button {
      cursor: pointer;
    }
  }
}
</style>
